<template>
  <div class="c-menu-modal-box" v-show="show" transition="scale">
    <div class="mask" v-show="show" transition="scale" @touchend="cancel"></div>
    <div class="menu-list-box" v-show="show" transition="formBottom">
      <slot name="menu">
        <span>按钮</span>
      </slot>
      <div class="menu cancel" @touchend="cancel">
        <span>取消</span>
      </div>
    </div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      show: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      cancel () {
        this.$dispatch('cancel')
      }
    }
  }

</script>
<style lang="stylus">

.c-menu-modal-box
  width 100%
  height 100%
  position absolute
  top 0
  left 0
  .mask
    width 100%
    height 100%
    background rgba(0,0,0,0.5)
  .menu-list-box
    width 100%
    height auto
    position absolute
    bottom 0
    left 0
    z-index 100
    /*background #ccc*/
    .menu
      width 100%
      height 1.3rem
      line-height 1.3rem
      text-align center
      border-bottom 1px solid #ccc
      background #fff
      font-size 0.45rem
      &:last-child
        border-bottom 0
        margin-top 0.15rem
    .red
      color #f00
</style>
